import React, { useState } from 'react';
import { connect } from 'umi';
import { Tabs, Card, Button } from 'antd';
import { eventTrack } from '@/utils/track';
import { history } from 'umi';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageRouter from '@/components/PageRouter/PageRouter';
import LaunchInterview from './LaunchInterview';
import ConductInterview from './ConductInterview';

const { TabPane } = Tabs;

const MyInterview = ({ ...rags }) => {
    const {
        query: { page, name }
    } = rags.location;
    const [activeKey, setActiveKey] = useState(page || '1');
    const callback = key => {
        const query = {
            page: key
        };
        if (name) {
            query.name = name;
        }
        history.push({
            pathname: '/personal/portal/recruit/interview',
            query
        });
        setActiveKey(key);
    };

    const operations = (
        <Button
            type="primary"
            onClick={async () => {
                // 埋点
                await eventTrack({
                    eventName: 'personal_my_recruit_interview_add_click',
                    eventProps: {
                        tabs: '我发起的面试',
                        label: '发起面试'
                    }
                });
                history.push({
                    pathname: '/personal/portal/recruit/interview/add',
                    query: {
                        type: 'type0'
                    }
                });
            }}
        >
            发起面试
        </Button>
    );
    return (
        <PageHeaderWrapper>
            <PageRouter type="myrecruit" extraButton={activeKey === '1' ? operations : ''}>
                {() => (
                    <Card bordered={false} bodyStyle={{ padding: '0 30px 30px' }}>
                        <Tabs
                            defaultActiveKey={activeKey}
                            onChange={callback}
                            // tabBarExtraContent={
                            //     activeKey === '1' ? operations : ''
                            // }
                        >
                            <TabPane tab="我发起的面试" key="1">
                                <LaunchInterview activeKey={activeKey} name={name} />
                            </TabPane>
                            <TabPane tab="我进行的面试" key="2">
                                <ConductInterview activeKey={activeKey} name={name} />
                            </TabPane>
                        </Tabs>
                    </Card>
                )}
            </PageRouter>
        </PageHeaderWrapper>
    );
};
export default withRoutePage(
    connect(({ loading }) => ({
        loading: loading.models
    }))(MyInterview)
);
